<template>
	<view class="">
		<view class="check-item flex align-c">
			<view class="flex align-c" @click="open(1)">
				<!-- <view class="">{{ province?province:'请选择省' }}</view> -->
				<view v-if="pindex || pindex === 0 || pindex === '0'">{{ arr[pindex].name }}</view>
				<view v-else class="p-c">请选择省</view>
				<image src="/static/home/pull-down-full.png" mode="widthFix" class="pull-down-icon" />
			</view>
			<view class="flex align-c item-ml" @click="open(2)">
				<!-- <view class="">{{ city?city: '请选择市' }}</view> -->
				<view v-if="cindex|| cindex === 0 || cindex === '0'">{{ arr[pindex].list[cindex].name }}</view>
				<view v-else class="p-c">请选择市</view>
				<image src="/static/home/pull-down-full.png" mode="widthFix" class="pull-down-icon" />
			</view>
		</view>
		
		<view class="drop-down-place"></view>
		
		<card :list="list" :chooseId="current" :isChoose="true" @checkItem="checkItem"></card>
	
		<u-popup :show="show" mode="bottom" @close="show=false">
			<view class="area_box">
				<!-- <view class="pop_tit">选择课程分类</view> -->
				<scroll-view scroll-y="true" class="class_box">
					<block v-if="isProvince">
						<view v-for="(v,i) in arr" :key="i" class="class_item" @click="checkAddress(v,i)">{{ v.name }}</view>
					</block>
					<block v-if="isCity && (index || index === 0)">
						<view v-for="(v,i) in arr[index].list" :key="i" class="class_item" @click="checkAddress(v,i)">{{ v.name }}</view>
					</block>
					
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import card from '@/components/card.vue';
	export default {
		components:{
			card
		},
		data() {
			return {
				list: [],
				current: '',
				province: '',
				city: '',
				arr: [],
				index: '',
				isCity: false,
				show: false,
				isProvince: false,
				areaList: [],
				provinceId: '',
				cityId: '',
				pindex: '',
				cindex: '',
				cityList: [],
			}
		},
		onLoad(e) {
			if(e&& e.shopId) {
				this.current = e.shopId;
				this.provinceId = e.provinceId;
				this.cityId = e.cityId;
			}
			this.getStoreList();
			this.getAreaList();
		},
		onShow() {
			
		},
		computed: {
			
		},
		methods: {
			async getStoreList() {
				let res = await this.$api.get('shop/list', {
					province: this.province,
					city: this.city,
					role: 'admin',
				});
				if(res.code == 200) {
					this.list = res.data
				}
			},
			checkItem(e) {
				this.current = e.id + '';
				uni.setStorageSync('shopId',e.id);
				uni.switchTab({
					url: '/pages/tab/home'
				})
			},
			async getAreaList() {
				let res = await this.$api.get('area/list');
				if(res.code == 200) {
					var list = res.data, arr2 = [];
					this.areaList = list;
					this.arr = list;
					if(this.provinceId && this.current) {
						for(var i=0;i<list.length;i++) {
							if(list[i].code == this.provinceId) {
								this.pindex = i;
								this.index = i;
								this.province = list[i].name;
								arr2 = list[i].list;
								this.cityList = list[i].list;
								
							}
						}
						if(this.cityId) {
							console.log(this.cityId,2355);
							for(var j=0; j<arr2.length;j++) {
								if(arr2[j].code == this.cityId) {
									this.cindex = j;
									this.city = arr2[j].name;
									this.watchpc();
								}
							}
						}
					}
				}
			},
			watchpc() {
				const { province,city } = this;
				if(province && city) {
					this.getStoreList();
				}
			},
			open(i) {
				if(this.index || this.index === 0) {
					if(i == 1) {
						this.arr = this.areaList;
						this.isCity = false;
						this.isProvince = true;
					}else {
						this.isProvince = false;
						this.isCity = true;
					}
					this.show = true;
				}else {
					uni.showToast({
						title: '请先选择省区'
					});
					
				}
				
			},
			checkAddress(v,i) {
				if(this.isProvince) {
					this.province = v.name;
					this.city = '';
					this.index = i;
					this.pindex = i;
					
				}else {
					this.city = v.name;
					this.cindex = i;
				}
				this.show = false;
				this.getStoreList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check-item {
		background-color: #FFF;
		font-size: 27rpx;
		padding: 0 27rpx;
		height: 44px;
		line-height: 44px;
		align-items: center;
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		right: 0;
		.pull-down-icon {
			width: 17rpx;
			height: 12rpx;
			margin-left: 8rpx;
		}
		.item-ml {
			margin-left: 70rpx;
		}
	}
	.drop-down-place {
		height: 44px;
	}
	.store-item {
		background-color: #FFF;
		border-radius: 20rpx;
		padding: 20rpx;
		margin: 20rpx 27rpx;
		padding-bottom: 0;
		position: relative;
		.store-act {
			position: absolute;
			top: 0;
			right: 0;
			background-color: #F17816;
			color: #FFF;
			padding: 8rpx 24rpx;
			font-size: 24rpx;
			border-radius: 0 20rpx 0 20rpx;
		}
		.image {
			width: 220rpx;
			height: 153rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
			background-color: #96ccb0;
			margin-bottom: 30rpx;
		}
		.store-name {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 16rpx;
		}
		.store-time {
			font-size: 26rpx;
		}
		.location {
			border-top: 1rpx solid #F5F5F5;
			line-height: 80rpx;
			font-size: 26rpx;
		}
	}
	.area_box {
		font-size: 27rpx;
		background-color: #FFF;
		.pop_tit {
			text-align: center;
			line-height: 80rpx;
			border-bottom: 10rpx solid #F5F5F5;
			padding: 0 30rpx;
			.pop_close {
				color: #000000;
			}
			.pop_btn {
				color: #F17816;
				font-weight: bold;
			}
		}
		.class_box {
			height: 50vh;
			.class_item {
				color: #000000;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				border-bottom: 1rpx solid #F5F5F5;
			}
			.class_act {
				color: #000000;
			}
		}
	}
</style>